<template>
  <div>
    <div class="bigShow"><a-button ghost @click="goBig">全屏展示</a-button></div>
    <mapAgent :mapHeight="mapHeight"></mapAgent>
    <a-modal v-model="mapDialog"  @ok="handleOk" width="100%" wrapClassName="full-modal" :closable='false' :footer="null">
     <mapAgent :mapHeight="webHeight"></mapAgent>
    </a-modal>
  </div>
</template>
<script>
import mapAgent from './mapAgent.vue'
// import { defineComponent, ref } from 'vue';
export default {
  data() {
    return {
      mapDialog: false,
      mapHeight:'',
      webHeight:''
    }
  },
  components: {
    mapAgent,
  },
  mounted(){
      setTimeout(() => {
         this.mapHeight = document.getElementById('mapHeight').clientHeight
    }, 0)
      this.webHeight=document.body.clientHeight
  },
  methods: {
    goBig() {
      this.mapDialog = true
    },
    handleOk() {
      this.mapDialog = false
    },
  },
}
</script>
<style scoped lang="less">
.bigShow {
  position: absolute;
  z-index: 9;
  top: 20px;
  left: 20px;
}
/deep/.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    padding: 0 !important;
  }
}
</style>